<template>
    <div>
        <el-container>
            <el-header>
                <h1>xxx大型后台管理系统</h1>
                <div class="h_r">
                    <h2>欢迎老用户：{{ store.getters.getUser.username }}</h2>
                    <el-button class="h_b" size="mini" type="danger" @click="logout">退出</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="240px">
                    <v-nav></v-nav>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import vNav from '../components/vNav.vue'
import { useStore } from 'vuex';
import router from '@/router';
const store = useStore()

const logout = () => {
    store.dispatch('UserActions', false)
    router.push('/login')
}
</script>

<style scoped>
.el-header {
    background-color: #518ecb;
    display: flex;
    position: relative;
}

.el-header h1 {
    color: #fff;
}

.el-header .h_r {
    position: absolute;
    right: 50px;
}

.el-header .h_b {
    margin-left: 60px;
}
</style>
